<template>
  <div>
    <div class="investmentAnalysisAadar">
      <div class="radar-charts"
           ref="chartTwo"
           style="height: 280px;width: 100%;">
      </div>
    </div>
  </div>
</template>

<script>
  //执行成功
  const ERROR_CODE = "ERRORCODE0000";
  //Vuex公共状态动作
  export default {
    name: 'RadarChart',
    props: ['data'],
    data() {
      return {
      };
    },
    mounted() {
      this.createChartOne();
    },
    watch: {
      'data.data': function(val) {
        this.createChartOne()
      },
      deep: true
    },
    methods: {
      //画折线图
      createChartOne() {
        let chartone = this.$echarts.init(this.$refs.chartTwo);
        let indindicator_data = [];
        let series_value = [];
        let title = '';
        if(this.data.data.length>0){
          indindicator_data = this.data.data;
          this.data.data.forEach(item => {
            series_value.push(item.value);
          })
          title = this.data.title;

        }else {
          indindicator_data=[
            { name: '', max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
            { name: '',max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
            { name: '', max:100,min:0,value:0},
          ]
          indindicator_data.forEach(item => {
            series_value.push(item.value);
          })
        }
        chartone.setOption({
          title: {
            text: title,
            textStyle:{
              fontSize:14,
            },
            left:'center',
          },
          legend: {
            data: []
          },
          tooltip: {
            show:true,
            trigger: 'item',
            formatter: function (params) {
              let text = '';
              indindicator_data.forEach(item => {
                text += item.name+'得分:'+item.value+'<br>';
              })
              return text;
            },
            position:{
              formatter: function (point, params, dom, rect, size) {
// 提示框位置
                let x = 0; // x坐标位置
                let y = 0; // y坐标位置

                // 当前鼠标位置
                let pointX = point[0];
                let pointY = point[1];

                // 提示框大小
                let boxWidth = size.contentSize[0];
                let boxHeight = size.contentSize[1];

                // boxWidth > pointX 说明鼠标左边放不下提示框
                // if (boxWidth > pointX) {
                //     x = 5;
                // } else {
                //     // 左边放的下
                //     x = pointX - boxWidth;
                // }
                x = pointX + 30;
                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                  y = 5;
                } else {
                  // 上边放得下
                  y = pointY - boxHeight;
                }

                return [x, y];
              },
            }
          },
          radar:
            {
              indicator: indindicator_data,
              splitArea: {
                areaStyle: {
                  color: ['rgba(250,250,250,0.3)',
                    '#f7f7f7', '#f7f7f7',
                    'rgba(250,250,250,0.3)',],
                }
              },
              shape: 'rect',
              center: ['50%', '55%'],
              radius: 50,
              splitNumber: 5,
              name: {
                /*formatter: function (param) {
                  if(param == '营收款欠款比率'){
                    return '营收款欠款...'
                  }else {
                    return param;
                  }

                },*/
                textStyle: {
                  color: '#666666',
                  fontSize:14
                }
              },
            }
          ,
          series:
            {
              name: '',
              type: 'radar',
              areaStyle: {},
              data: [
                {
                  value: series_value/*[-3.5, 28, 45, -2, -39,20]*/,
                }
              ],
              itemStyle: {
                normal: {
                  color : "#feccbb", // 图表中各个图区域的边框线拐点颜色
                  lineStyle: {
                    color:"#ec8c91" // 图表中各个图区域的边框线颜色
                  },
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
            }
        });
        window.addEventListener("resize", () => {
          chartone.resize();
        });
      },
    },
  }
</script>


<style lang="scss" scoped>
  .investmentAnalysisAadar {
    margin: 11px 14px 11px;
    padding: 0px 9px 12.5px;
    background: #fff;
  }
  .investmentAnalysisAadarOne{
    background: #fff;
  }
  /deep/ .radar-charts>div:nth-of-type(2){
    z-index: 90!important;
  }
</style>
